<template>
	<view class="prediction">
		<view class="line">
			<view class="title"><text class="count">*</text>包裹快递号(温馨提示：多个快递单号可以一次性预报，用逗号隔开，无需多包裹多次预报噢)</view>
			<view class="choose more-number">
				<textarea style="background-color: #F5F5F5; padding: 10px 15px; width: 100%; border-radius:5rpx; font-size: 14px; color: #999999;"
				 v-model="order_no" placeholder="请输入快递单号" maxlength="-1"
				 placeholder-style="background-color:#F5F5F5;padding-left:43rpx;padding:30rpx;"  />
				<!-- <u-input type="textarea" height="200" placeholder="请填写包裹快递号,多个包裹可用逗号隔开" border="none" v-model="order_no" :customStyle="inputStyle"></u-input> -->
				<!-- placeholderStyle="{'font-size': '28rpx';
        'color':' #999999'}" -->
			</view>
		</view>
		<view class="line" v-for="(item, index) in chooseList" :key="index">
			<view class="title"><text class="count">*</text>{{ item.name }}</view>
			<view class="choose">
				<u-cell-group :border="false" :customStyle="lineStyle">
					<u-cell :title="item.title" :isLink="true" :border="false" :titleStyle="item.titleStyle"
						:arrow-direction="item.direction" @click="chooseItem(item)"></u-cell>
				</u-cell-group>
			</view>
		</view>
		<view class="line">
			<view class="title"><text class="count">*</text>包裹类型</view>
			<view class="choose">
				<u-cell-group :border="false" :customStyle="lineStyle">
					<u-cell :title="packageType.title" :isLink="true" :border="false" :titleStyle="packageType.titleStyle"
						@click="goToUrl('/pages/home/packageType')">
						<u-image width="40rpx" height="40rpx" slot="right-icon" src="/static/icon/arrow.png"></u-image>
					</u-cell>
				</u-cell-group>
			</view>
		</view>
		<view class="info">
			<view class="ititle space-between" @click="goToUrl('/pages/home/addArticle')">
				<!-- <view class="it"><text class="count" style="color: #ff0000;">*</text>物品信息</view> -->
				<view class="it">物品信息</view>
				<view class="add">
					<view>请填写所有物品信息</view>
					<view style="margin-left: 24rpx;">继续添加</view>
					<view class="addIcon">
						<u-image width="40rpx" height="40rpx" src="/static/icon/add.png"></u-image>
					</view>
				</view>
			</view>
			<view v-for="(item, index) in articleList" :key="index" :style="{ 'margin-top': index != 0 ? '60rpx' : '' }">
				<view class="ititle space-between">
					<view class="it iit">{{ item.title }}</view>
					<view class="right">
						<view class="add" @click="edit(item)">
							<view class="addIcon">
								<u-image width="30rpx" height="30rpx" src="/static/icon/edit.png"></u-image>
							</view>
							<view>编辑</view>
						</view>
						<view class="add" @click="deleted(item)">
							<view class="addIcon">
								<u-image width="30rpx" height="30rpx" src="/static/icon/delete.png"></u-image>
							</view>
							<view>删除</view>
						</view>
					</view>
				</view>
				<view class="detail space-between" v-for="(ditem, dindex) in item.detailList" :key="dindex">
					<view>{{ ditem.specs }}</view>
					<view>{{ ditem.count }}</view>
				</view>
			</view>
		</view>
		<view class="line">
			<view class="title">预报备注</view>
			<view class="choose">
				<u-input placeholder="备注信息" border="none" v-model="notesValue" :customStyle="inputStyle"></u-input>
				<!-- placeholderStyle="{'font-size': '28rpx';
        'color':' #999999'}" -->
			</view>
		</view>
		<view class="serve">
			<view class="title">增值服务</view>
			<u-checkbox-group v-model="checkboxValue" placement="column" @change="checkboxChange">
				<u-checkbox :customStyle="{ marginBottom: '8px' }" v-for="(item, index) in checkboxList" :key="index"
					:label="item.title" :name="item.id" labelColor="#999999">
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view class="tip">
			<u-checkbox-group>
				<u-checkbox v-model="readed" @change="checkboxChange1"  shape="circle"></u-checkbox>
				<text style="color: #ff0000;">*</text>预报前请仔细阅读并同意
				<text class="more" @click="open">《预报须知》</text>
			</u-checkbox-group>
		</view>
		<view class="btn" @click="toDetail">确认预报包裹</view>
		<!-- 选择列表 -->
		<u-picker :closeOnClickOverlay="true" :show="pickerShow" :columns="pickerColumns" :defaultIndex="defaultIndex"
			@confirm="confirm" @cancel="cancel"></u-picker>
		<!-- 预报须知 -->
		<u-popup :show="popupShow" :round="10" mode="bottom">
			<view class="content">
				<view class="ptitle">预报须知</view>
				<view class="pcontet">{{forecastNotice}}</view>
				<view class="pbtn" @click="close">同意并继续</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 选择的索引
				chooseIndex: 0,
				// 选择列表
				chooseList: [{
					id: 0,
					name: "送达仓库",
					title: "请选择送达仓库",
					direction: "down",
					titleStyle: {
						"font-size": "28rpx",
						color: "#999999",
					},
				}, ],
				// 包裹类型
				packageType: {
					title: "请选择包裹类型(可多选)",
					titleStyle: {
						"font-size": "28rpx",
						color: "#999999",
					},
				},
				// 选择框样式
				lineStyle: {
					"background-color": "#F5F5F5",
					"border-radius": "5rpx",
					padding: "15rpx",
				},
				// 输入框样式
				inputStyle: {
					"background-color": "#F5F5F5",
					"border-radius": "5rpx",
					"padding-left": "43rpx",
					padding: "30rpx",
				},
				// 包裹单号
				order_no: "",
				// 选择展示
				pickerShow: false,
				// 备注信息
				notesValue: "",
				// 选择单项
				pickerColumns: [],
				// 默认选择的索引
				defaultIndex: [],
				country: ["中国深圳仓库"],
				area: ["美西地区(80000-99999邮编段)", "美中地区(40000-79999邮编段)", "美东地区(00000-39999邮编段)"],
				line: ["空运普货直邮", "海运普货直邮"],
				// 商品列表
				articleList: [],
				// 多选
				checkboxValue: [],
				// 基本案列数据
				checkboxList: [{
						id: 0,
						name: "免费拍照",
					},
					{
						id: 1,
						name: "代检查商品是否完整",
					},
					{
						id: 2,
						name: "免费仓储",
					},
					{
						id: 3,
						name: "免费打包",
					},
				],
				// 预报须知弹框
				popupShow: false,
				// 仓库id
				w_id:'',
				// 类型id
				type_id:'',
				// 预报须知
				forecastNotice:'',
				id:'',
				readed:false
			};
		},

		onLoad(options) {
			console.log(options,'options 123');
			this.id = '';
			this.getCountry();
			this.getCheckboxList();
			this.getForecastNotice();
			if (options.data) {
				let data = JSON.parse(options.data);
				console.log(data,"data")
				for (let key in data) {
					this[key] = data[key]
				}
			}
			if (options.type) {
				let typeList = JSON.parse(options.type);
				this.packageType.title = '';
				this.type_id='';
				console.log(typeList,"typeList")
				typeList.forEach(item=>{
					if(!this.packageType.title){
						this.packageType.title = item.cate_name;
						this.type_id = item.id;
					}else{
						this.packageType.title = this.packageType.title+(','+item.cate_name);
						this.type_id  = this.type_id+(','+item.id);
					}
				})
				// this.packageType.title = JSON.parse(options.type).cate_name;
				// this.type_id = JSON.parse(options.type).id;
				this.packageType.titleStyle.color = "#333333";
			}
			if (options.articleInfo) {
				let articleInfo = JSON.parse(options.articleInfo)
				if(articleInfo.index || articleInfo.index===0 ){
					this.articleList.splice(articleInfo.index,1,articleInfo);
				}else{
					this.articleList.push(articleInfo);
				}
			}
			if (options.info) {
				let info = JSON.parse(options.info);
				if(info.id){
					this.id = info.id;
				}
				this.order_no = info.track;
				this.chooseList[0].title = info.warehouse;
				this.chooseList[0].titleStyle.color = "#333333";
				this.defaultIndex.push(this.country.indexOf(info.warehouse));
				this.packageType.title = info.type_name;
				this.packageType.titleStyle.color = "#333333";
				this.notesValue = info.remakes;
				this.checkboxValue = info.s_ids && info.s_ids.split(",") ||[];
				this.w_id = info.w_id;		
				this.type_id = info.type_id;
				this.articleList = info.info && info.info.map(it=>{
					let its = {
						title:it.name,
						"detailList":[{"specs":"数量","count":it.num},
						// {"specs":"规格","count":it.spe},{"specs":"品牌","count":it.brand},
						{"specs":"单价","count":it.price}]
					}
					return its
				});
				this.getInitData(info.id);
				console.log(this.articleList,"this.articleList")
			}
		},

		methods: {
			getInitData(id){
				this.$api.post({
				    url: "/ebapi/public_api/reservation_info",
				    data: {id:id},
				    success: (res) => {
						// this.forecastNotice = res;
						console.log(res,"res getInitData")
					},
				 })
			},
			getForecastNotice(){
				this.$api.post({
				    url: "/ebapi/public_api/reservation_notice",
				    data: {},
				    success: (res) => {
						this.forecastNotice = res;
						console.log(res,"res getForecastNotice")
					},
				 })
			},
			getCountry(){
				this.$api.post({
				    url: "/ebapi/public_api/warehouse",
				    data: {},
				    success: (res) => {
						this.country = res;
						console.log(res,"res getCountry")
					},
				 })
			},
			getCheckboxList(){
				this.$api.post({
				    url: "/ebapi/public_api/add_service",
				    data: {},
				    success: (res) => {
						this.checkboxList = res;
						console.log(res,"res getCheckboxList")
					},
				 })
			},
			checkboxChange1(val){
				this.readed = val;
			},
			// 多选
			checkboxChange(n) {
				console.log("change", n);
			},
			// 点击选择项
			chooseItem(item) {
				this.pickerColumns = [];
				this.chooseIndex = item.id;
				if (item.direction == "down") {
					item.direction = "up";
					this.pickerShow = true;
					if (item.id == 0) {
						let country = this.country.map(it=>it.warehouse)
						this.pickerColumns.push(country);
					} else if (item.id == 1) {
						this.pickerColumns.push(this.area);
					} else if (item.id == 2) {
						this.pickerColumns.push(this.line);
					}
					if (item.titleStyle.color == "#999999") {
						this.defaultIndex = [];
					} else {
						this.defaultIndex.push(this.pickerColumns[0].indexOf(item.title));
					}
				} else {
					item.direction = "down";
				}
			},
			// 选择框选择
			confirm(e) {
				console.log(e, "列表选项");
				this.chooseList[this.chooseIndex].title = e.value[0];
				this.chooseList[this.chooseIndex].titleStyle = "#333333";
				this.pickerShow = false;
				if(this.chooseIndex == 0){
					this.w_id = this.country[e.indexs[0]].id
				}
				this.chooseList.forEach((element) => {
					element.direction = "down";
				});
			},
			// 选择框取消
			cancel() {
				this.pickerShow = false;
				this.chooseList.forEach((element) => {
					element.direction = "down";
				});
			},
			// 去详情页
			toDetail() {
				console.log(this.readed,"this.readed")
				if(!this.readed){
					uni.showToast({
						title:"请仔细阅读并勾选《预报须知》！",
						icon:"none"
					})
					return
				}
				let info = this.articleList.map(item=>{
					let obj = {};
					obj.name = item.title;
					obj.num = item.detailList&&item.detailList[0]&&item.detailList[0].count;
					// obj.spe = item.detailList&&item.detailList[1]&&item.detailList[1].count;
					// obj.brand = item.detailList&&item.detailList[2]&&item.detailList[2].count;
					obj.price = item.detailList&&item.detailList[1]&&item.detailList[1].count;
					return obj
				})
				let reqData = {
					track:this.order_no,	//运单号
					w_id:this.w_id,			//仓库id
					type_id:this.type_id,	//类型id
					info:JSON.stringify(info),	//物品信息
					remakes:this.notesValue,	//备注
					s_ids:this.checkboxValue.join(",")	//增值服务
				}
				if(!this.order_no){
					uni.showToast({
						title:"请先输入包裹快递号！",
						icon:'none'
					})
					return
				}
				if(!this.w_id){
					uni.showToast({
						title:"请先选择送达仓库！",
						icon:'none'
					})
					return
				}
				if(!this.type_id){
					uni.showToast({
						title:"请先选择包裹类型！",
						icon:'none'
					})
					return
				}
				// if(!this.articleList.length){
				// 	uni.showToast({
				// 		title:"请先填写包裹信息！",
				// 		icon:'none'
				// 	})
				// 	return
				// }
				if(this.id){
					reqData.id = this.id;
				}
				console.log(reqData,"reqData");
				let that = this;
				// uni.showModal({
				// 	title: '提示',
				// 	content: '请邮寄包裹时将会员ID填写在包裹备注上，便于我们入库！',
				// 	success: function (res) {
				// 		if (res.confirm) {
							uni.showLoading({
							  title: '预报中...',
							  mask: true // 是否显示透明蒙层，防止触摸穿透，默认为false
							});
							that.$api.post({
								url: "/ebapi/public_api/forecast_package",
								data: reqData,
								success: (res) => {
								   setTimeout(() => {
									  uni.hideLoading();
									  that.$uniApi.rl("/pages/home/noArrived");
									}, 1000);
									// uni.hideLoading();
									// that.$uniApi.rl("/pages/home/noArrived");
								},
								fail: (err) => {
									setTimeout(() => {
									  uni.hideLoading();
									}, 1000);
								}
							 })
				// 		} else if (res.cancel) {
				// 			return
				// 		}
				// 	}
				// })
			},
			goToUrl(url){
				let form = {
					order_no:this.order_no,
					w_id:this.w_id,
					type_id:this.type_id,
					packageType:this.packageType,
					articleList:this.articleList,
					chooseList:this.chooseList,
					notesValue:this.notesValue,
					checkboxValue:this.checkboxValue
				}
				if(this.id){
					form.id = this.id;
				}
				console.log(url,"url",form,"form");
				this.$uniApi.rt(`${url}?form=${JSON.stringify(form)}`)
			},
			// 预报须知
			open() {
				this.popupShow = true;
			},
			close() {
				this.popupShow = false;
			},
			// 物品编辑
			edit(item) {
				let form = {
					order_no:this.order_no,
					w_id:this.w_id,
					type_id:this.type_id,
					packageType:this.packageType,
					articleList:this.articleList,
					chooseList:this.chooseList,
					notesValue:this.notesValue,
					checkboxValue:this.checkboxValue
				}
				if(this.id){
					form.id = this.id;
				}
				let articleInfo = ''
				// let articleInfo = JSON.stringify(item);
				this.articleList.forEach((goods, index) => {
					if (goods.title == item.title) {
						item.index = index;
						articleInfo = JSON.stringify(item);
						// this.articleList.splice(index, 1);
					}
				});
				
				this.$uniApi.to(`/pages/home/addArticle?articleInfo=${articleInfo}&form=${JSON.stringify(form)}`);
			},
			// 物品删除
			deleted(ditem) {
				uni.showModal({
					title: "提示",
					content: "是否确认删除？",
					success: (res) => {
						if (res.confirm) {
							// 确定
							this.articleList.forEach((goods, index) => {
								if (goods.title == ditem.title) {
									this.articleList.splice(index, 1);
								}
							});
						} else if (res.cancel) {
							// 取消
							console.log("用户点击了取消");
						}
					},
				});
			},
		},
	};
</script>

<style lang="scss">
	.prediction {
		width: 702rpx;
		min-height: 1355rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 6rpx 1rpx rgba(0, 0, 0, 0.16);
		border-radius: 10rpx;
		opacity: 1;
		padding: 42rpx 30rpx;
		margin: 24rpx 0;

		.line {
			margin-bottom: 34rpx;
			.more-number{
				.u-input__content__field-wrapper{
					height: 200rpx !important;
				}
			}
			.title {
				font-size: $uni-text-size-title;
				margin-bottom: 20rpx;

				.count {
					color: #ff0000;
				}
			}

			.tips {
				color: #999999;
				font-size: 22rpx;
				margin-top: -10rpx;
				margin-bottom: 20rpx;
			}
		}

		.info {
			margin: 55rpx 0 100rpx;

			.ititle {
				font-size: $uni-text-size-title;
				margin-bottom: 35rpx;

				.add {
					color: $uni-color-main;
					display: flex;
					align-items: center;

					.addIcon {
						margin-left: 25rpx;
					}
				}

				.iit {
					color: $uni-color-main;
				}

				.right {
					display: flex;
					align-items: center;
					font-size: $uni-text-size-primary;

					.add {
						color: $uni-text-color-grey;

						.addIcon {
							margin-right: 10rpx;
						}
					}
				}
			}

			.detail {
				margin-bottom: 32rpx;
				font-size: $uni-text-size-primary;
			}
		}

		.serve {
			margin-bottom: 55rpx;

			.title {
				font-size: $uni-text-size-title;
				margin-bottom: 20rpx;
			}
		}

		.btn {
			color: #ffffff;
			font-size: 32rpx;
			padding: 33rpx 188rpx;
			border-radius: 50rpx;
			font-weight: bold;
			margin: 33rpx 15rpx 93rpx;
			background-color: $uni-color-main;
		}

		.tip {
			color: #999999;
			font-size: 24rpx;
			text-align: center;

			.more {
				color: $uni-color-main;
			}
		}

		.content {
			padding: 35rpx 62rpx 50rpx;

			.ptitle {
				font-size: 36rpx;
				font-weight: bold;
				text-align: center;
			}

			.pcontet {
				color: #999999;
				font-size: 36rpx;
				margin: 100rpx 0 175rpx;
			}

			.pbtn {
				background-color:  $uni-color-main;
				border-radius: 60rpx;
				text-align: center;
				color:#fff;
				font-size: 28rpx;
				line-height: 60rpx;
			}
		}
	}
</style>